<template>
  <card :title="title">
    <template v-slot:content>
      <div class="content">
        <div class="weather">
          <svg-icon class="weather_icon" :icon-class="weather" />
          <div class="info">
            <div class="temperature">{{ weatherData.temperature }}℃</div>
            <div class="date">{{year}}-{{month}}-{{day}} {{ week }}</div>
          </div>
        </div>
        <div class="list">
          <div class="box" @click="toApproval">
            <svg-icon class="list_icon" icon-class="db" />
            <div class="right">
              <div class="title">待审批</div>
              <div class="info">
                <div class="num">{{nums.waitSize}}</div>
                <!-- <div class="compare">
                  相较昨日
                  <i class="el-icon-caret-bottom"></i>
                  12
                </div>-->
              </div>
            </div>
          </div>
          <div class="box" @click="toApproval">
            <svg-icon class="list_icon" icon-class="yb" />
            <div class="right">
              <div class="title">已处理</div>
              <div class="info">
                <div class="num">{{nums.FinishSize}}</div>
                <!-- <div class="compare">
                  相较昨日
                  <i class="el-icon-caret-bottom"></i>
                  12
                </div>-->
              </div>
            </div>
          </div>
          <div class="box" @click="toMessage">
            <svg-icon class="list_icon" icon-class="h_message" />
            <div class="right">
              <div class="title">未读消息</div>
              <div class="info">
                <div class="num">{{nums.messageSize}}</div>
                <!-- <div class="compare">
                  相较昨日
                  <i class="el-icon-caret-bottom"></i>
                  12
                </div>-->
              </div>
            </div>
          </div>
          <div class="box">
            <svg-icon class="list_icon" icon-class="x_signin" />
            <div class="right">
              <div class="title">本月考勤天数</div>
              <div class="info">
                <div class="num">{{clockCount}}</div>
                <div class="compare">天</div>
              </div>
            </div>
          </div>
        </div>
<!--        <div class="qd">-->
<!--          &lt;!&ndash; <svg-icon class="weather_icon" icon-class="sign_in" /> &ndash;&gt;-->
<!--          <div class="state checked_in" v-if="state">已签到</div>-->
<!--          <div class="state no_checked_in" v-else>签到打卡</div>-->
<!--        </div>-->
      </div>
    </template>
  </card>
</template>

<script>
import card from "@/views/homePage/components/card";
import {getUserClockCountByMonth} from "@/api/oa/humanClockCount";
import moment from "moment/moment";

export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    weatherData: {
      type: Object,
      default: {}
    },
    nums: {
      type: Object,
      default: {}
    },
    state: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      userName: this.$store.getters.name,
      year: "",
      month: "",
      day: "",
      week: "",
      clockCount:0,
    };
  },
  components: {
    card
  },
  computed: {
    weather() {
      let svg = "";
      switch (this.weatherData.weather) {
        case "晴":
          svg = "sunny";
          break;
        case "阴":
          svg = "overcast";
          break;
        case "少云":
          svg = "cloudy";
          break;
        case "晴间多云":
          svg = "cloudy";
          break;
        case "多云":
          svg = "cloudy";
          break;
        case "平静":
          svg = "cloudy";
          break;
        case "有风":
          svg = "overcast";
          break;
        case "阴天":
          svg = "overcast";
          break;
        case "雨":
          svg = "light_rain";
          break;
        case "小雨":
          svg = "light_rain";
          break;
        case "中雨":
          svg = "moderate_rain";
          break;
        case "大雨":
          svg = "heavy_rain";
          break;
        case "雪":
          svg = "light_snow";
          break;
        case "小雪":
          svg = "light_snow";
          break;
        case "大雪":
          svg = "heavy_snow";
          break;
        case "中雪":
          svg = "moderate_snow";
          break;
        case "暴雨":
          svg = "rainstorm";
          break;
        case "大暴雨":
          svg = "rainstorm";
          break;
        case "特大暴雨":
          svg = "rainstorm";
          break;
        case "阵雨":
          svg = "rain_shower";
          break;
        case "强阵雨":
          svg = "rain_shower";
          break;
        case "雷阵雨":
          svg = "thundershower";
          break;
        case "阵雪":
          svg = "snow_shower";
          break;
        case "雾":
          svg = "foggy";
          break;
        case "浓雾":
          svg = "foggy";
          break;
        case "轻雾":
          svg = "foggy";
          break;
        case "沙尘暴":
          svg = "sandstorm";
          break;
        case "雨夹雪":
          svg = "sleet";
          break;
        case "暴雪":
          svg = "snowstorm";
          break;
        default:
          svg = "weather_none";
      }
      return svg;
    }
  },
  mounted() {
    this.getTime();
    this.getUserClockCountByMonth();
  },
  methods: {
    getTime() {
      let now = new Date();
      this.year = now.getFullYear();
      this.month = now.getMonth() + 1;
      this.day = now.getDate();
      this.week = "星期" + "日一二三四五六".charAt(now.getDay());
    },
    toApproval() {
      // console.log(type);
      this.$router.push("/oa2/approval");
    },
    toMessage() {
      this.$router.push("/system/message");
    },
    getUserClockCountByMonth(){
      const month = moment().format('YYYY-MM');
      let param={
        "userId":this.$store.state.user.userId,
        "month":month
      }
      getUserClockCountByMonth(param).then(response=>{
        this.clockCount=response.data
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.weather_icon {
  font-size: 0.625rem;
}
.content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .weather {
    display: flex;
    align-items: center;
    margin-left: 0.225rem;
    width: 2.8rem;
    .info {
      margin-left: 0.225rem;
      justify-content: space-between;
      .temperature {
        font-size: 0.225rem;
        font-weight: 700;
      }
      .date {
        font-size: 0.175rem;
      }
    }
  }
  .list {
    display: flex;
    width: calc(100% - 4rem);
    align-items: center;
    justify-content: space-around;
    // margin-right: 0.225rem;
    .box {
      cursor: pointer;
      // margin: 0 0.6rem;
      display: flex;
      align-items: center;
      .list_icon {
        font-size: 0.625rem;
      }
      .right {
        .title {
          font-size: 0.175rem;
          font-weight: 600;
        }
        .info {
          display: flex;
          align-items: end;
          justify-content: center;
        }
        .num {
          font-size: 0.4rem;
          font-weight: 700;
        }
        .compare {
          margin-left: 0.125rem;
          margin-bottom: 0.1rem;
        }
      }
    }
  }
  .qd {
    display: flex;
    align-items: center;
    // margin-right: 0.02rem;
    min-width: 1.4rem;
    .state {
      cursor: pointer;
      margin-left: 0.2rem;
      border-radius: 0.125rem;
      color: #ffffff;
      font-weight: 700;
      font-size: 0.225rem;
      padding: 0.125rem 0.175rem;
      transition: 0.3s;
      // transform: translateY(-50%);
      &:hover {
        transform: translateY(-10%);
        background-color: rgb(64, 158, 255);
      }
    }
    .checked_in {
      background-color: rgb(64, 158, 255);
    }

    .no_checked_in {
      background-color: rgb(255, 67, 64);
    }
  }
}
</style>
